{% extends "movies/default_template.html" %}

{% load truncate %}

{% block title %}
	NMJ - View movie
{% endblock %}

{% block content %}
	{% if movie %}
		<script>
			function toggle_watched(img, type, video_id){
				img.src = "/static/changing.png";
				var bodyContent = $.ajax({
					url: "/movies/{{movie.directory_index}}/" + video_id + "/" + type + "_watched_toggle",
					global: false,
					type: "GET",
					success:function(response, http_response, jqXHR) {
						if (parseInt(response) > 0){
							img.src = "/static/viewed.png";
							img.title = "Watched";
							img.onclick = function (){ mark_as_not_watched(img, type, video_id); }
						}else{
							img.src = "/static/not_viewed.png";
							img.title = "Not watched";
							img.onclick = function (){ mark_as_watched(img, type, video_id); }
						}
						if (type == "show" && {{ movie.show_type }} == 0){
							if (parseInt(response) > 0){
								$(".smallicon").each(function (){
									$(this).attr("src", "/static/viewed.png");
									$(this).attr("title", "Watched");
								});
							}else{
								$(".smallicon").each(function (){
									$(this).attr("src", "/static/not_viewed.png");
									$(this).attr("title", "Not watched");
								});
							}
						}
					}
				})
			}
		
		</script>
		{% if movie.background %}
			<div id="background"><img src="/static/movies/posters/{{ movie.background }}" /></div>
		{% endif %}
		<div id="poster"><img width="200" height="300" src="/static/movies/posters/{{ movie.poster }}" /></div>
		{% if movie.episodes %}
			<div id="episodes">
				<ul class="episodes">
				{% for episode in movie.episodes %}
					<li>
					{% if episode.play_count %}
						<img id="{{episode.video_id}}" src="/static/viewed.png" class="smallicon" title="Watched" onClick="toggle_watched(this, 'video', {{episode.video_id}});"/>
					{% else %}
						<img id="{{episode.video_id}}" src="/static/not_viewed.png" class="smallicon" title="Not watched" onClick="toggle_watched(this, 'video', {{episode.video_id}});"/>
					{% endif %}
					{{ episode.episode }} - {{ episode.title|truncate:"31" }}
					</li>
				{% endfor %} 
				</ul>
			</div>
		{% endif %}
		<div id="wrapper">
			<div id="show_title">
				{% if movie.watched %}
					<img src="/static/viewed.png" class="icon" title="Watched" onClick="toggle_watched(this, 'show', {{movie.show_id}});"/>
				{% else %}
					<img src="/static/not_viewed.png" class="icon" title="Not watched" onClick="toggle_watched(this, 'show', {{movie.show_id}});"/>
				{% endif %}
				{{ movie.title }} 
				<br/>
				<a class="link" href="/movies/{{movie.directory_index}}/{{movie.show_id}}/edit">This is not my movie !</a>
			</div>
			<div id="show_details">
				<br/>
				<table class="with_bg"><tr><td>
					{{ movie.synopsis }}
				</td></tr></table>
			</div>
		</div>
	{% else %}
		<p>No movie ???</p>
	{% endif %}
{% endblock %}